<template>
  <div>
    <a-modal
      v-model:open="modalOpen"
      title="取消订单"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          ref="ruleForm"
          :model="formData"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-form-item
            label="取消备注"
            name="reason"
            :rules="[{ required: true, message: '备注不能为空!' }]"
          >
            <a-textarea
              :rows="6"
              v-model:value="formData.reason"
              placeholder="输入取消原因"
              :maxlength="500"
            />
          </a-form-item>
        </a-form>
        <div class="modal-but-layout">
          <a-space wrap>
            <a-popconfirm
              title="您是否要数据重置?"
              ok-text="是"
              cancel-text="否"
              @confirm="handleReset"
            >
              <a-button>重置</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="handleSubmit">确认取消</a-button>
          </a-space>
        </div>
      </a-space>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { message } from "ant-design-vue";
import {
  cancelOrderByShop
} from "@/api/order"
const modalOpen = ref(false)

const formData = ref({
  id: '',
  reason: '',
})

const open = (id) => {
  formData.value.id = id
  modalOpen.value = true
}
function handleReset () {
  formData.value.reason = ''
  ruleForm.value.resetFields()
}
const emits = defineEmits('refreshList')
const ruleForm  = ref(null)
const handleSubmit = () => {
  console.log('aaa',ruleForm.value)
  ruleForm.value.validate().then(() => {
    cancelOrderByShop(formData.value).then(res => { 
      message.info('取消成功')
      modalOpen.value = false
      emits('refreshList',true)
    })
    
  }).catch((error) => {
    console.log("校验失败", error);
  });

}
defineExpose({ modalOpen, open })
</script>

<style lang="less">
.img-item {
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}

.modal-but-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
</style>
